<template>
  <div class="box">
    <div class="descriptions-title flex item-center justify-between">
      <div class="cl-title">{{ title }}:</div>
      <slot name="title-opt" />
    </div>
    <div class="cl-descriptions-box">
      <el-descriptions border :column="3">
        <el-descriptions-item
          v-for="item in sortList"
          :width="156"
          :label="item"
          label-align="center"
          label-class-name="lab-box"
          class-name="val-box"
          :span="getSpan(item)"
        >
          <span>
            {{ getVal(item) }}
          </span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: '基本信息'
  },
  sortList: {
    type: Array as PropType<string[]>,
    required: true
  },
  apiData: {
    type: Object as any,
    required: true
  }
})

const setSpanData = (data) => {
  if (!data) return ''
  let nameList = data.map((m) => m.name || m.userName)
  return nameList.join(',')
}
const getVal = (item) => {
  try {
    if (item === '公司项目管理人员') {
      return setSpanData(JSON.parse(props.apiData['companyProjectLeader']))
    }

    return props.apiData[chineseMap[item]] ?? '---'
  } catch (error) {
    console.log(item)
    console.log(props.apiData[chineseMap[item]])
    return '数据有误！'
  }
}
const LONG_SPAN = ['流程状态']
const getSpan = (item) => {
  if (LONG_SPAN.includes(item)) {
    return 3
  }
  return 1
}

const chineseMap: any = {
  项目编号: 'projectNo',
  报销金额: 'money'
}
</script>

<style lang="scss">
.box {
  height: 100%;
  width: 100%;
}
.descriptions-title {
  margin-bottom: 10px;
  .cl-title {
    font-weight: 700;
    font-size: 14px;
    color: #171717;
    line-height: 22px;
  }
}
.cl-descriptions-box {
  border-radius: 6px;
  overflow: hidden;
}

.lab-box {
  width: 169px;
  height: 45px;
  background: rgba(0, 0, 0, 0.02) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(0, 0, 0, 0.65) !important;
}

.val-box {
  height: 45px;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(0, 0, 0, 0.88) !important;
}
</style>
